<html>

<head>
    <meta charset="utf-8" />
    <title>MD2Card</title>
</head>

<body>
    <div style="width: 750px; margin: auto;">
        <section class="js-preview card markdown-body card-nature wechat"
            style="position: relative; line-height: 1.75; color: #24292e; background-color: #fff; font-size: 16px; word-wrap: break-word; position: relative; width: 100%; max-width: 500px; border-radius: 16px; background: #f9fcf7; box-shadow: 0 10px 30px rgba(142, 199, 142, 0.15); padding: 30px; font-family: 'PingFang SC', sans-serif; border: 1px dashed #c8e6c9; overflow: hidden;">
            <section class="card-content" style="font-size: 16px; position: relative; color: #555; height: auto;">
                <section class="card-content-inner">
                    <blockquote
                        style="margin: 20px 0; padding: 10px 20px; position: relative; font-style: italic; background-color: white; border-left: 4px solid #a5d6a7; color: #4caf50; border-radius: 0 12px 12px 0; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);">
                        <p style="margin-top: 0; line-height: 1.8; font-size: 16px;"> {{weiyu}} 🌟</p>
                    </blockquote>
                    <p style="margin-top: 0; line-height: 1.8; font-size: 16px; padding: 0; margin: 16px 0;"><img
                            src="{{head_image}}" alt
                            style="max-width: 100%; border-radius: 8px; margin: 20px auto; display: block; width: auto; height: auto;">
                    </p>
                    <ol
                        style="list-style: none; counter-reset: item; padding-left: 20px; margin: 20px 0; background: white; border-radius: 12px; padding: 20px 25px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);">
                        {% for item in news %}
                        <li data-index="{{ loop.index }}"
                            style="position: relative; counter-increment: item; list-style: none; margin-bottom: 5px; padding-left: 10px; color: #555; line-height: 1.7; font-size: 15px; border-bottom: 1px dashed #e8f5e9; padding-bottom: 10px; display: flex; align-items: center;">
                            <!-- 修改 left 和 top 定位，使用 margin-right 替代绝对定位 -->
                            <span
                                style="background: #a5d6a7; color: white; width: 28px; height: 28px; border-radius: 50%; text-align: center; line-height: 28px; font-weight: bold; margin-right: 12px; flex-shrink: 0;">{{ loop.index }}</span>
                            <section>{{ item }}</section>
                        </li>
                        {% endfor %}
                    </ol>
                </section>
            </section>
        </section>
    </div>
</body>

</html>